<!--授课情况-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-item right20">
        <div class="item-name">学期：</div>
          <el-select v-model="dataForm.beginYear" placeholder="请选择" class="width110" size="mini">
              <el-option v-for="item in nf" :key="item.value" :label="item.value" :value="item.label"></el-option>
          </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">系：</div>
        <el-select v-model="dataForm.dept" placeholder="请选择" class="width110" size="mini">
            <el-option v-for="item in xi" :key="item.id" :label="item.deptName" :value="item.deptName"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">教研室：</div>
        <el-select v-model="dataForm.staffRoom" placeholder="请选择" class="width110" size="mini">
            <el-option v-for="item in jys" :key="item.id" :label="item.deptName" :value="item.deptName"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right20">
        <div class="item-name">教员姓名：</div>
        <el-input size="mini" class="width110" v-model="dataForm.teacherName"></el-input>
      </div>
      <div class="search-button color-primary width70 right20" @click="initList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button color-green" @click="givenInfo">
        <span>授予权限</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
        <el-table-column prop="xueQiShow" label="学期" align="center"></el-table-column>
        <el-table-column prop="bx" label="系" align="center" width="100"></el-table-column>
        <el-table-column prop="staffRoom" label="教研室" align="center" width="150"></el-table-column>
        <el-table-column prop="teacherName" label="教员姓名" align="center" ></el-table-column>
        <el-table-column prop="courseName" label="课程" align="center" ></el-table-column>
        <el-table-column prop="teachHoursCount" label="课时" align="center" width="100"></el-table-column>
        <el-table-column prop="hqTeachHoursCount" label="优质课课时" align="center" ></el-table-column>
        <el-table-column prop="studentReview" label="学员评价分数" align="center" ></el-table-column>
        <el-table-column prop="studentReviewRating" label="在本教研室占位情况" align="center" ></el-table-column>
        <el-table-column prop="review" label="督导评价分数" align="center" ></el-table-column>
        <el-table-column prop="reviewRating" label="在本教研室占位情况" align="center" ></el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="importExcel" style="width:150px">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
    </div>
      <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
    <div class="pagination-block">
        <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import {skList} from "@/api/lineData";
import {teacherList} from "@/api/teaching";

import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      nf:[],
      xi:[],
      jys:[],
      dataForm:{
        beginYear:'',
        endYear:'',
        dept:'',
        pageNo:1,
        pageSize:50,
        staffRoom:'',
        teacherName:'',
      },
      tableData: [],
      xueqiID:'',
    };
  },
  mounted(){
     //系列表
    this.commonApi.getXIOption().then(res=>{
      this.xi = [{deptName:'全部'},...res.data]
    })
    //获取教研室
    this.commonApi.getJYSOption().then(res=>{
      this.jys = [{deptName:'全部'},...res.data]
    })
    let current = new Date().getFullYear();
    let nf = []
    for(let i=0;i<5;i++){
      nf.push({
        label:(current - i)+'',
        value:(current - i)+'',
      })
    }
    this.nf = nf
    this.teacherInfo()
    this.initList()
  },
  methods: {
      //当前页
    currentPage(e){
      this.dataForm.current = e;
      this.initList()
    },
    //初始化表格
    async initList(){
      let res = await skList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }else{
        this.$message.error(res.msg);
      }
    },
    async teacherInfo(){
      let res = await teacherList();
      if(res.code == 200){
        this.dataForm.xi = res.data.isAdmin !=='1'? res.data.xi:'';
        this.dataForm.jys = res.data.isAdmin !=='1'? res.data.jys:'';
        //系列表
        this.commonApi.getXIOption().then(res=>{
          this.xi = res.data
        })
        //获取教研室
        this.commonApi.getJYSOption().then(res=>{
          this.jys = res.data
        })
      }
    },
    //导出
    importExcel(){
        Axios({
            method: 'get',
            url: this.$store.state.studentUrl.baseUrl+'/KpiTeach/exportKpiData',
            params:this.dataForm,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '教学授课情况.xlsx');
        }); 
    },
    //跳转授予权限
    givenInfo(){
      this.$router.push({
        path:'/teaching/performance/givenQX'
      })
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.width70{width: 70px;}
.search-container {justify-content: flex-start !important;}
.width110{width: 110px;}
.color-green{
    width: 94px;
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
}
</style>
